<template>
    <div class="main">
        <PageHeader></PageHeader>

        <div class="body">
            <div class="container">
                <ul class="articles">
                    <li class="article" v-for="a in articleList" :key="a.id">
                        <h2
                            @click="aClick(a)"
                            class="title"
                            v-text="a.title"
                        ></h2>
                        <p class="summary" v-text="a.summary"></p>

                        <p class="info">
                            <span v-text="a.author.nickname"></span>
                            <span v-text="a.author.addTime"></span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>

        <PageFooter></PageFooter>
    </div>
</template>

<script>
import PageHeader from "@/components/commons/header";
import PageFooter from "@/components/commons/footer";
export default {
    props: [],
    components: { PageHeader, PageFooter },
    data() {
        return {
            articleList: [],
        };
    },
    mounted() {
        // 组件挂载完成，立即请求服务端数据
        this.loadArticles();
    },
    methods: {
        loadArticles() {
            // 模拟ajax异步请求获取的数据
            let as = [
                {
                    id: 1,
                    title: "测试文章1",
                    summary: "文章摘要",
                    author: {
                        id: 1,
                        nickname: "张三1",
                        addTime: "2021-04-11 16:52:00",
                    },
                },
                {
                    id: 2,
                    title: "测试文章2",
                    summary: "文章摘要",
                    author: {
                        id: 2,
                        nickname: "张三2",
                        addTime: "2021-04-11 16:52:00",
                    },
                },
                {
                    id: 3,
                    title: "测试文章3",
                    summary: "文章摘要",
                    author: {
                        id: 3,
                        nickname: "张三3",
                        addTime: "2021-04-11 16:52:00",
                    },
                },
                {
                    id: 4,
                    title: "测试文章4",
                    summary: "文章摘要",
                    author: {
                        id: 4,
                        nickname: "张三4",
                        addTime: "2021-04-11 16:52:00",
                    },
                },
            ];

            this.articleList = as;
        },
        aClick(a) {
            this.$router.push("/article/" + a.id);
        },
    },
};
</script>

<style lang="less" scoped>
.articles {
    .article {
        padding: 20px 0;
        border-bottom: 1px dashed #ddd;
        // & 代表当前元素自己
        &:last-child {
            border-bottom: none;
        }
        .title {
            cursor: pointer;
        }

        .summary {
            margin: 10px 0;
            font-size: 17px;
        }

        .info {
            color: #999;
            font-size: 13px;

            span {
                margin-right: 15px;
            }
        }
    }
}
</style>